<template>
  <div class="RadioSimple">
    <div v-if="left" :style="width">
      <div
        v-for="(item,index) in data"
        class="float-left"
        :class="[index===selectIndex?'active':'default','w-1-'+(data.length)]"
        :key="index"
        @click="click(item,index)"
      >
        <p>{{item.name}}</p>
      </div>
    </div>
    <div v-else :style="width">
      <div
      
      v-for="(item,index) in data"
      class="float-left"
      :class="[index===selectIndex?'active':'default','w-1-'+(data.length)]"
      :key="index"
      @click="click(item,index)"
    >
      <p>{{item.name}}</p>
    </div>
    </div>
    
    <select class="monthSelect" v-model="month" v-if="left">
      <option
        :value="item.value"
        v-for="(item,index) in monthList"
        :key="index"
        :label="item.label"
      >{{item.label}}</option>
    </select>
  </div>
</template>
<script>
/**
 * 只做了单项绑定，返回结果为object
 */
export default {
  name: "RadioSimple",
  data() {
    return {
      selectIndex: 0,
      month: 0,
      monthList: [
        {
          value: 0,
          label: "市场主体"
        },
        {
          value: "2020-08-01",
          label: "2020-08"
        },
        {
          value: "2020-07-01",
          label: "2020-07"
        },
        {
          value: "2020-06-01",
          label: "2020-06"
        },
        {
          value: "2020-05-01",
          label: "2020-05"
        }
      ]
    };
  },
  props: {
    left: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    width: {
      type: String,
      default: () => {
        return 'width:30%';
      }
    }
  },
  watch: {
    selectIndex: {
      deep: true,
      immediate: true,
      handler: function() {
        this.$emit("input", this.data[this.selectIndex]);
      }
    },
    month: {
      handler: function() {
        this.$emit("select", this.month);
      }
    }
  },
  methods: {
    click(item, index) {
      this.selectIndex = index;
    }
  }
};
</script>

<style scoped lang="less">
.RadioSimple {
  // background-color: #42b983;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  /*height: auto;*/
  flex-direction: row;
  width: 100%;
  padding: 0 0.25rem;
  justify-content: space-between;
  > div {
    width: 30%;
    padding: 0.5rem 0;
    .float-left {
      // background-image: url("./img/simple_default.png");
      // background-size: 100% 100%;
      background: rgba(74, 144, 226, 0.31);
      flex-grow: 1;
      text-align: center;
      display: table;
      height: 100%;
      flex-basis: auto;
      cursor: pointer;
      > p {
        display: table-cell;
        vertical-align: middle;
        font-size: 20px;
        color: #fff;
      }
    }

    > .active {
      font-weight: bold;
      // background-image: url("./img/simple_active.png");
      background: #01778B;

      > p {
        color: #fff;
        font-size: 20px;
      }
    }
  }
  select {
    background: #1d607a;
    margin-right: 5%;
    width: 12%;
    font-size: 2rem;
    padding: 0 1%;
    option {
      font-size: 0.5rem;
      height: 25px;
    }
  }
}
</style>
